<template>
  <div>
    <el-card class="box-card">
      <div>
        <el-form ref="form" :model="form" label-width="120px">
          <el-row>
            <el-col :span="8">
              <div>
                <el-form-item label="订单编号">
                  <el-input
                    v-model="form.orderId"
                    placeholder="请输入订单编号"
                    style="width: 230px"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8"
              ><div>
                <el-form-item label="订单状态">
                  <el-select
                    v-model="form.status"
                    placeholder="请选择"
                    style="width: 230px"
                  >
                    <el-option label="待取件" value="23000"></el-option>
                    <el-option label="已取件" value="23001"></el-option>
                    <el-option label="网点自寄" value="23002"></el-option>
                    <el-option label="网点入库" value="23003"></el-option>
                    <el-option label="待装车" value="23004"></el-option>
                    <el-option label="运输中" value="23005"></el-option>
                    <el-option label="网点出库" value="23006"></el-option>
                    <el-option label="待派送" value="23007"></el-option>
                    <el-option label="派送中" value="23008"></el-option>
                    <el-option label="已签收" value="23009"></el-option>
                    <el-option label="拒收" value="230010"></el-option>
                    <el-option label="已取消" value="230011"></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="8"
              ><div>
                <el-form-item label="付费状态">
                  <el-select
                    v-model="form.paymentStatus"
                    placeholder="请选择"
                    style="width: 237px"
                  >
                    <el-option label="未付" value="1"></el-option>
                    <el-option label="已付" value="2"></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <div>
                <el-form-item label="发件人姓名">
                  <el-input
                    v-model="form.senderName"
                    placeholder="请输入发件人姓名"
                    style="width: 230px"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8"
              ><div>
                <el-form-item label="发件人电话">
                  <el-input
                    v-model="form.senderPhone"
                    placeholder="请输入发件人电话"
                    style="width: 230px"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="8">
              <div>
                <el-form-item label="发件人地址">
                  <el-select
                  @change="pdprovince"
                    v-model="pcaids.senderprovinceid"
                    placeholder="省"
                    style="width: 88px"
                  >
                  <el-option label="全部" value="0"></el-option>
                    <el-option v-for="(item,index) in pca.provinces" :label="item.province" :key="index" :value="item.provinceid"
                    :v-if="item.province"
                    ></el-option>
                  </el-select>
                  <el-select
                  show-overflow-tooltip
                    @change="pdcities"
                    v-model="pcaids.sendercitiesid"
                    placeholder="市"
                    style="width: 88px"
                    >
                    <el-option v-for="(item,index) in pca.cities" :label="item.city" :key="index" :value="item.cityid"></el-option>
                  </el-select>
                  <el-select
                    v-model="pcaids.senderareasid"
                    placeholder="县/区"
                    style="width: 88px">
                    <el-option v-for="(item,index) in pca.areas" :label="item.area" :key="index" :value="item.areaid"></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <div>
                <el-form-item label="收件人姓名">
                  <el-input
                    v-model="form.receiverName"
                    placeholder="请输入收件人姓名"
                    style="width: 230px"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8"
              ><div>
                <el-form-item label="收件人电话">
                  <el-input
                    v-model="form.receiverPhone"
                    placeholder="请输入收件人电话"
                    style="width: 230px"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="8">
              <div>
                <el-form-item label="收件人地址">
                  <el-select
                  @change="pdprovince1"
                    v-model="pcaids.receiverprovinceid"
                    placeholder="省"
                    style="width: 88px">
                    <el-option label="全部" value="0"></el-option>
                    <el-option v-for="(item,index) in pca1.provinces" :label="item.province" :key="index" :value="item.provinceid"></el-option>
                  </el-select>
                  <el-select
                  @change="pdcities1"
                    v-model="pcaids.receivercitiesid"
                    placeholder="市"
                    style="width: 88px">
                    <el-option v-for="(item,index) in pca1.cities" :label="item.city" :key="index" :value="item.cityid"></el-option>
                  </el-select>
                  <el-select
                    v-model="pcaids.receiverareasid"
                    placeholder="县/区"
                    style="width: 88px">
                    <el-option v-for="(item,index) in pca1.areas" :label="item.area" :key="index" :value="item.areaid"></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="onSubmit"
              >搜索</el-button
            >
            <el-button type="warning" plain @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card class="box-card-bottom">
      <div>
        <!-- 订单显示表格 -->
        <el-table
          :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          stripe
          border
          style="width: 100%; border: 10px"
        >
          <el-table-column fixed type="index" label="序号" width="50" />
          <el-table-column prop="orderId" label="订单编号" width="130" />
          <el-table-column
            prop="transportOrder.id"
            label="运单编号"
            width="120"
          />
          <el-table-column
            prop="createTime"
            show-overflow-tooltip
            label="下单时间"
            width="120"
          />
          <el-table-column
            prop="status"
            show-overflow-tooltip
            label="订单状态"
            width="120"
          />
          <el-table-column
            prop="senderName"
            show-overflow-tooltip
            label="发件人姓名"
            width="100"
          />
          <el-table-column
            prop="senderPhone"
            show-overflow-tooltip
            label="发件人电话"
            width="120"
          />
          <el-table-column
            prop="senderAddress"
            show-overflow-tooltip
            label="发件人地址"
            width="150"
          />
          <el-table-column
            prop="receiverName"
            show-overflow-tooltip
            label="收件人姓名"
            width="120"
          />
          <el-table-column
            prop="receiverPhone"
            show-overflow-tooltip
            label="收件人电话"
            width="120"
          />
          <el-table-column
            prop="receiverAddress"
            show-overflow-tooltip
            resizable
            label="收件人地址"
            width="150"
          />
          <el-table-column
            prop="pickupType"
            show-overflow-tooltip
            label="取件类型"
            width="120"
          />
          <el-table-column
            prop="paymentMethod"
            show-overflow-tooltip
            label="付费方式"
            width="120"
          />
          <el-table-column prop="paymentStatus" label="付款状态" width="120" />
          <el-table-column prop="orderId" fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <router-link :to="`/orderinfo/${scope.row.orderId}`"><el-button type="text" size="small">查看详情</el-button></router-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- ----------------------------------------------------------- -->
        <div class="demo-pagination-block">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[1, 4, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="parseInt(ordertotle)"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
// import axios from "axios";

import orderApi from "@/apis/order.js";
import $ from "jquery";

export default {
  data() {
    return {
      form: {
        orderId: "",
        status: "",
        paymentStatus: "",
        senderName: "",
        senderPhone: "",
        senderProvinceId:"",
        senderCityId:"",
        senderCountyId:"",
        receiverName: "",
        receiverPhone: "",
        receiverProvinceId:"",
        receiverCityId:"",
        receiverCountyId:""
      },
      tableData: "",
      currentPage: 1,
      ordertotle: "0",
      pagesize: 4,
      pca:{
        provinces:"",
        cities:"",
        areas:""
      },
      pca1:{
        provinces:"",
        cities:"",
        areas:""
      },
      pcaids:{
        senderprovinceid:"",
        sendercitiesid:"",
        senderareasid:"",
        receiverprovinceid:"",
        receivercitiesid:"",
        receiverareasid:""
      }
    };
  },
  methods: {
    //订单详情
    orderDetails(row){
      // this.$router.push({path:'info/orderInfo.vue',params:{order:row}});
    },
    reset(){
      this.form.orderId=""
      this.form.status=""
      this.form.paymentStatus=""
      this.form.senderName=""
      this.form.senderPhone=""
      this.form.receiverName=""
      this.form.receiverPhone=""
      this.pcaids.senderprovinceid=""
      this.pcaids.sendercitiesid=""
      this.pcaids.senderareasid=""
      this.pcaids.receiverprovinceid=""
      this.pcaids.receivercitiesid=""
      this.pcaids.receiverareasid=""
      this.loadorderlist()
    },
    pdcities1(){
      this.pcaids.receiverareasid=""
      orderApi.findareasbyid({"cityid":this.pcaids.receivercitiesid}).then((response)=>{
        this.pca1.areas=response.data
      })
    },
    pdcities(){
      this.pcaids.senderareasid=""
      orderApi.findareasbyid({"cityid":this.pcaids.sendercitiesid}).then((response)=>{
        this.pca.areas=response.data
      })
    },
    pdprovince1(){
      this.pcaids.receivercitiesid=""
      this.pcaids.receiverareasid=""
      this.pca1.areas=""
      if(this.pcaids.receiverprovinceid==0){
        this.pca1.cities="";
        this.pcaids.receivercitiesid=""
        this.pca1.areas=""
        this.pcaids.receiverareasid=""
        return false;
      }
      orderApi.findcitiesbyid({"provinceid":this.pcaids.receiverprovinceid}).then((response)=>{
        this.pca1.cities=response.data
      })
    },
    /**
     * 渲染该省下的市
     */
    pdprovince(){
      this.pcaids.sendercitiesid=""
      this.pcaids.senderareasid=""
      this.pca.areas=""
      if(this.pcaids.senderprovinceid==0){
        this.pca.cities="";
        this.pcaids.sendercitiesid=""
        this.pca.areas=""
        this.pcaids.senderareasid=""
        return false;
      }
      orderApi.findcitiesbyid({"provinceid":this.pcaids.senderprovinceid}).then((response)=>{
        this.pca.cities=response.data
      })
    },
    /**
     * 初始数据
     */
    loadorderlist() {
      orderApi.orderlist().then((response) => {
        const res = response.data;
        this.tableData = res;
        this.pdpickupType(this.tableData);
        this.pdpaymentMethod(this.tableData);
        this.pdpaymentStatus(this.tableData);
        // alert(this.tableData1[0].receiverAddress)
        // alert(res[0].receiverAddress);
        this.ordertotle = res.length;
        console.log("----------------")
        console.log(res);
      });
    },
    /**
     * 条件查询
     */
    onSubmit() {
      this.form.senderProvinceId=this.pcaids.senderprovinceid;
      this.form.senderCityId=this.pcaids.sendercitiesid;
      this.form.senderCountyId=this.pcaids.senderareasid;
      this.form.receiverProvinceId=this.pcaids.receiverprovinceid;
      this.form.receiverCityId=this.pcaids.receivercitiesid;
      this.form.receiverCountyId=this.pcaids.receiverareasid;
      console.log(this.form)
      orderApi.orderlist(this.form).then((response) => {
          const res = response.data;
        this.tableData = res;
        this.pdpickupType(this.tableData);
        this.pdpaymentMethod(this.tableData);
        this.pdpaymentStatus(this.tableData);
        // alert(this.tableData1[0].receiverAddress)
        // alert(res[0].receiverAddress);
        this.ordertotle = res.length;
      })
    },
    handleSizeChange(val) {
      // this.currentPage=1
      this.pagesize = val;
      // alert(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      // alert(`当前页: ${val}`);
    },
    // 判断取件类型
    pdpickupType(r) {
      for (var i = 0; i < r.length; i++) {
        if (r[i].pickupType == 1) {
          r[i].pickupType = "同城订单";
        } else if (r[i].pickupType == 2) {
          r[i].pickupType = "城际订单";
        } else {
          r[i].pickupType = "未知";
        }
      }
    },
    //判断付款方式
    pdpaymentMethod(r) {
      for (var i = 0; i < r.length; i++) {
        if (r[i].paymentMethod == 1) {
          r[i].paymentMethod = "预结";
        } else if (r[i].paymentMethod == 2) {
          r[i].paymentMethod = "到付";
        } else {
          r[i].paymentMethod = "未知";
        }
      }
    },
    //判断付款状态
    pdpaymentStatus(r) {
      for (var i = 0; i < r.length; i++) {
        if (r[i].paymentStatus == 1) {
          r[i].paymentStatus = "未付";
        } else if (r[i].paymentStatus == 2) {
          r[i].paymentStatus = "已付";
        } else {
          r[i].paymentStatus = "未知";
        }
      }
    },
    pcalistfun(){
      orderApi.pcalist().then((response)=>{
          this.pca.provinces=response.data[0];
          this.pca1.provinces=response.data[0];
      })
    }
  },
  mounted: function () {
    // alert(123)
    this.loadorderlist();
    this.pcalistfun();
  },
};
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  margin-top: 10px;
  width: 98%;
  margin-left: auto;
  margin-right: auto;
}

.box-card-bottom {
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1%;
  padding: 18px 0;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
</style>